import { getFieldFilterInfo } from '@/js/tableFilterUtils'

export default {
  name: 'CommonTableAttrMixins',
  props: {
    tableData: {
      default: () => [],
      type: Array
    },
    tableTitle: {
      default: () => [],
      type: Array
    },
    filterInfo: {
      default: () => {},
      type: Object
    },
    // 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；
    // 如果设置了 expand 则显示为一个可展开的按钮
    type: {
      type: String,
      default: undefined
    },
    rowOptionFixed: { // 值与el-table-column的fixed一样
      default: 'right',
      type: [Boolean, String]
    },
    rowOptionWidth: { // 值与el-table-column的width一样
      default: 100,
      type: [Number, String]
    },
    filterable: {// 是否可过滤
      default: false,
      type: Boolean
    },
    showRowOption: {// 是否显示操作列
      default: true,
      type: Boolean
    },
    expandAll: {// 是否展开所有行
      default: true,
      type: Boolean
    },
    defaultStyle: {// table默认样式
      default: 'width: 100%',
      type: [String, Object]
    },
    highlightCurrentRow: {// 高亮选中行
      default: true,
      type: Boolean
    },
    tableHeightFixed: { // 是否现在表格高度, 默认固定
      default: true,
      type: Boolean
    },
    tableMaxHeight: { // 表格最大高度
      default: 200,
      type: Number
    }
  },
  data(){
    return {
      maxHeight: undefined,
      filterData: null,
      rawFilterData: null
    }
  },
  methods: {
    /**
     * 设置table表头class
     */
    setTableHeaderClass(row){
      return row.rowIndex === 2 ? 'hidden-custom-table-header' : 'custom-table-header'
    },
    getTableHeight(){
      this.maxHeight = this.$refs.outerContainer.offsetHeight - this.$refs.toolbar.offsetHeight
    },
    searchData(){
      this.$emit('search-data', {...this.filterData})
    },
    clearData(){
      this.filterData = {...this.rawFilterData}
      this.$emit('clear-data', this.filterData)
    },
    resetFilter(){
      this.filterData = {...this.rawFilterData}
    },
    getFilterData(){
      return {...this.filterData}
    },
    initFilterData(){
      if (this.filterInfo){
        const newFilterData = getFieldFilterInfo(this.filterInfo) || {}
        this.filterData = {...newFilterData}
        this.rawFilterData = {...newFilterData}
      }
    },
    /**
     * 根据table 列的formatter函数名，获取相应的函数
     */
    getFunByFunName(functionName){
      if (!functionName) return undefined
      let fun = this[functionName]
      fun = typeof fun === 'function' ? fun : window[functionName]
      return typeof fun == 'function' ? fun : undefined
    },
    /**
     * 根据value获取显示值
     * @param options
     * @param optionValue
     */
    getOptionLabel(options, optionValue){
      if (this.$isInstance(options, '[object Array]')){
        for (let i = 0; i < options.length; i++) {
          if (optionValue == options[i].value){
            return options[i].label || optionValue
          }
        }
      }
      return optionValue
    },
    /**
     * 判断是否是下拉选项显示值
     */
    checkSelect(filterInfo, prop){
      const type = filterInfo?.[prop]?.propType
      return type === 'select' || type === 'multSelect'
    },
    /**
     * 格式化表格数据
     */
    formatterCellValue(cellTitle, row){
      const fun = typeof cellTitle.formatter === 'string' ? this.getFunByFunName(cellTitle.formatter) : undefined
      return fun ? fun(row[cellTitle.prop], row) : row[cellTitle.prop]
    }
  },
  created(){
    if (this.tableHeightFixed){
      this.maxHeight = this.tableMaxHeight
    }
    this.initFilterData()
  },
  mounted() {
    if (this.tableHeightFixed) {
      this.$nextTick(() => {
        this.getTableHeight()
      })
      window.addEventListener('resize', this.getTableHeight)
    }
  },
  destroyed() {
    if (this.tableHeightFixed) {
      window.removeEventListener('resize', this.getTableHeight)
    }
  }
}
